<template>
  <div class="wrapper">
    <div class="copy-info card">
      <div class="title">{{ appraisalData.deptNameTree }}</div>
      <div class="btn-wrap">
        <div class="time">{{ appraisalData.year }}年第{{ appraisalData.quarter }}季度</div>
        <div class="btn-wrapper">
          <div class="btn" :class="{ active: active == 0 }" @click="active = 0">未评议</div>
          <div class="btn" :class="{ active: active == 1 }" @click="active = 1">已评议</div>
        </div>
      </div>
    </div>
    <pull-refresh-list ref="pageRecords" v-show="active == 0" :limit="pageRecords.pageSize" :page-no.sync="pageRecords.pageNo" :data.sync="pageRecords.records" @getList="initRecords">
      <div class="list-item card" v-for="item in pageRecords.records" :key="item.id">
        <img v-if="item.avater" class="user" :src="item.avater" />
        <div v-else class="user">{{ item.userName | nameFormat }}</div>
        <div class="item-content">
          <div class="name">{{ item.userName }}</div>
          <div class="copy van-ellipsis">隶属单位：{{ item.organizationName }}</div>
        </div>
        <div class="btn" v-if="active == 0" @click="onShowPopup(item)">评议</div>
      </div>
    </pull-refresh-list>
    <pull-refresh-list
      ref="pageFinishedRecords"
      v-show="active == 1"
      :limit="pageFinishedRecords.pageSize"
      :page-no.sync="pageFinishedRecords.pageNo"
      :data.sync="pageFinishedRecords.records"
      @getList="initFinishedRecords"
    >
      <div class="list-item card" v-for="item in pageFinishedRecords.records" :key="item.id">
        <img v-if="item.avater" class="user" :src="item.avater" />
        <div v-else class="user">{{ item.userName | nameFormat }}</div>
        <div class="item-content">
          <div class="name">{{ item.userName }}</div>
          <div class="copy van-ellipsis">隶属单位：{{ item.organizationName }}</div>
        </div>
        <div class="score">
          <span class="num">{{ item.grade }}</span>
          <span class="text">分</span>
        </div>
      </div>
    </pull-refresh-list>
  </div>
</template>

<script>
import { unAppraisalPeopleList, appraisedPeopleList } from "@/api/appraisalPeriod";
export default {
  props: {
    group: {
      type: Object,
      default: () => {
        return {
          appraisalId: 0,
          deptId: 0,
          id: 0
        };
      }
    },
    appraisalData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    finish: {
      type: Boolean,
      default: false
    }
  },
  filters: {
    nameFormat(str) {
      return str.slice(-2);
    }
  },
  data() {
    return {
      active: 0,
      pageRecords: {
        pageSize: 10,
        pageNo: 1,
        records: []
      },
      pageFinishedRecords: {
        pageSize: 10,
        pageNo: 1,
        records: []
      }
    };
  },
  watch: {
    active(val) {
      this.onRefresh();
    }
  },
  created() {
    this.active = this.finish ? 1 : 0;
  },
  methods: {
    onShowPopup(item) {
      this.$emit("onEvaluate", item);
    },
    onRefresh() {
      if (this.active == 0) {
        this.$refs["pageRecords"].onSearch();
      } else {
        this.$refs["pageFinishedRecords"].onSearch();
      }
    },
    initRecords(callback) {
      let param = {
        pageSize: this.pageRecords.pageSize,
        pageNo: this.pageRecords.pageNo,
        appraisalId: this.group.appraisalId,
        deptId: this.group.deptId,
        groupId: this.group.id
      };
      unAppraisalPeopleList(param).then(res => {
        const row = res.data.records.map(s => {
          return {
            ...s
          };
        });
        callback(row);
      });
    },
    initFinishedRecords(callback) {
      let param = {
        pageSize: this.pageFinishedRecords.pageSize,
        pageNo: this.pageFinishedRecords.pageNo,
        appraisalId: this.group.appraisalId,
        deptId: this.group.deptId,
        groupId: this.group.id
      };
      appraisedPeopleList(param).then(res => {
        const row = res.data.records.map(s => {
          return {
            ...s
          };
        });
        callback(row);
      });
    }
  }
};
</script>

<style scoped lang="scss">
.wrapper {
  padding: 16px;
}
.card {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 16px 20px;
}
.copy-info {
  .title {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 3px;
  }
  .btn-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .time {
      color: #a3a7ad;
      font-size: 13px;
    }
    .btn-wrapper {
      display: flex;
      align-items: center;

      .btn {
        margin-left: 12px;
        line-height: 22px;
        background: rgba(204, 204, 204, 0.2);
        border-radius: 4px;
        width: 48px;
        text-align: center;
        font-size: 10px;
        color: #a3a7ad;
        &.active {
          color: #fff;
          background: #2492ff;
        }
      }
    }
  }
}
.list-item {
  display: flex;
  align-items: center;
  .user {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    margin-right: 12px;
    background: #2492ff;
    color: #fff;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
  }
  .item-content {
    flex: 1;
    .name {
      font-size: 14px;
      color: #333;
      line-height: 20px;
    }
    .copy {
      max-width: 190px;
      margin-top: 3px;
      color: #a3a7ad;
      font-size: 12px;
    }
  }
  .btn {
    width: 40px;
    line-height: 24px;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    margin-left: 12px;
    font-size: 10px;
    background: #2492ff;
  }
  .score {
    .num {
      font-size: 20px;
      font-weight: 600;
      color: #f60e36;
      margin-right: 8px;
    }
    .text {
      color: rgba(36, 46, 69, 0.3);
      font-size: 14px;
    }
  }
}
</style>
